<template>
  <div class="fillcontain">
    <div class="table_container">
      <el-table
        :data="ipTableData"
        max-height="600"
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column property="protocol" label="协议类型" width="100">
        </el-table-column>
        <el-table-column
          property="ipInReceives"
          label="已接收IP数据报数"
          width="200"
        >
        </el-table-column>
        <el-table-column
          property="ipOutRequests"
          label="本地上层协议提供给IP传送的数据报数"
          width="340"
        >
        </el-table-column>
        <el-table-column property="ipOutDiscards" label="已丢弃输入IP数据报数">
        </el-table-column>
        <el-table-column
          property="ipInDelivers"
          label="成功发送到上层协议IP数据报数"
        >
        </el-table-column>
      </el-table>
      <div class="Pagination" style="text-align: left; margin-top: 10px">
        <!--                <el-pagination
                  layout="total"
                  :total="ipCount">
                </el-pagination>-->
      </div>
    </div>
    <div class="table_container">
      <el-table
        :data="tcpTableData"
        max-height="600"
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column property="protocol" label="协议类型" width="100">
        </el-table-column>
        <el-table-column property="tcpInSegs" label="收到TCP段个数" width="140">
        </el-table-column>
        <el-table-column
          property="tcpOutSegs"
          label="输出TCP段个数"
          width="140"
        >
        </el-table-column>
        <el-table-column
          property="tcpRetransSegs"
          label="重传TCP段个数"
          width="140"
        >
        </el-table-column>
        <el-table-column
          property="tcpInErrs"
          label="收到错误TCP段个数"
          width="180"
        >
        </el-table-column>
        <el-table-column
          property="tcpEstabResets"
          label="已建立连接被复位次数"
          width="130"
        >
        </el-table-column>
        <el-table-column
          property="tcpActiveOpens"
          label="主动打开的TCP连接数"
          width="140"
        >
        </el-table-column>
        <el-table-column
          property="tcpPassiveOpens"
          label="因收到请求被动打开的TCP连接数"
          width="150"
        >
        </el-table-column>
        <el-table-column
          property="tcpAttemptFails"
          label="建立连接尝试失败次数"
        >
        </el-table-column>
      </el-table>
      <div class="Pagination" style="text-align: left; margin-top: 10px">
        <!--                <el-pagination
                  layout="total"
                  :total="count">
                </el-pagination>-->
      </div>
    </div>
    <div class="table_container">
      <el-table
        :data="udpTableData"
        max-height="600"
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column property="protocol" label="协议类型" width="100">
        </el-table-column>
        <el-table-column
          property="udpInDatagrams"
          label="收到UDP数据报数"
          width="220"
        >
        </el-table-column>
        <el-table-column
          property="udpOutDatagrams"
          label="发送UDP数据报数"
          width="220"
        >
        </el-table-column>
        <el-table-column property="udpInErrors" label="接收的错误UDP数据报数">
        </el-table-column>
        <el-table-column
          property="udpNoPorts"
          label="接收的发送到无效UDP端口的数据报数目"
        >
        </el-table-column>
      </el-table>
      <div class="Pagination" style="text-align: left; margin-top: 10px">
        <!--                <el-pagination
                  layout="total"
                  :total="count">
                </el-pagination>-->
      </div>
    </div>
  </div>
</template>

<script>
// import protocolInfo from '../../../json_data/protocolInfo.json'
import { get } from "../../request";
export default {
  data() {
    return {
      /*tableData:atInfo['atResult']*/
      ipTableData:[],
      tcpTableData:[],
      udpTableData:[]
    };
  },
  components: {},
  mounted() {
    setInterval(this.sendRequest, 5000);
  },
  methods: {
    sendRequest() {
      get({
        url: "/getprotocolinfo",
      })
        .then((res) => {
          // var json_data = res.data.data;
          // console.log(res.data);
          this.loadData(res.data);
        })
        .catch((res) => {
        });
    },
    loadData(protocolInfo) {
      this.ipTableData = protocolInfo.ipInfo;
      this.tcpTableData = protocolInfo.tcpInfo;
      this.udpTableData = protocolInfo.udpInfo;
    },
  },
};
</script>

<style lang="less">
@import "../style/mixin";
.table_container {
  padding: 20px;
}
</style>
